@import "../../../dojo/resources/dojo.css";
.playerContainer{
width:480px;
background:#76C8C4;
text-align:center;
}
.PlayerScreen{
background:#00FFFF;
width:320px;
height:240px;
margin-left:auto;
margin-right:auto;
}
.Controls{
height:85px;
background:#333333;
text-align:left;
width:100%;
}
.ControlsRight{
vertical-align:top;
}
.ControlsBottom{
vertical-align:bottom;
}
.StatusContainer{
width:100%;
height:100%;
}
.PlayContainer{
width:60px;
height:60px;
}
.Progress{
height:10px;
}
.Time, .Duration, .Status{
height:16px;
margin-top:0px;
color:#F5FFC8;
width:100%;
}
.Time{
padding-left:2px;
} 
.Duration{
padding-right:2px;
text-align:right;
}
.StatusContainer{
padding:0;
border-collapse:collapse;
}
.Status{
}
.Status.statusError .statusTitle, .Status.statusError .statusInfo{
color:#FF0000;
}
.Status .statusTitle{
font-weight:bold;
color:#A5B3E9;
}
.Status .statusInfo{
font-weight:normal;
color:#3770D6;
}
.Time, .Duration, .Status{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
background:#000000;
}
.Time, .Duration{
width:60px;
}
.Volume{
width:30px;
height:30px;
float:right;
margin-right:2px;
margin-top:auto;
background-image:url(images/player_sprite.png);
background-repeat:no-repeat;
background-position:-1px -62px;
cursor:pointer;
}
.Volume:hover{
background-position:-33px -62px;
}
.PlayPauseToggle{
width:60px;
height:60px;
background-image:url(images/player_sprite.png);
background-repeat:no-repeat;
background-position:-1px -1px;
cursor:pointer;
vertical-align:middle;
line-height:60px;
}
.PlayPauseToggle:hover{
background-position:-63px -1px;
cursor:pointer;
}
.icon{
background-image:url(images/dojoPlayerIcons.png);
background-repeat:no-repeat;
width:22px;
height:22px;
}
.PlayPauseToggle .icon{
position:relative;
top:19px;
left:19px;
background-position:-1px -1px;
}
.PlayPauseToggle.Play .icon{
background-position:-1px -1px;
}
.PlayPauseToggle.Pause .icon{
background-position:-24px -1px;
}
.Progress{

}
.Progress, .ProgressLoaded, .ProgressPosition, .ProgressHandle{
height:10px;
}
.ProgressLoaded, .ProgressPosition, .ProgressHandle{
position:absolute;
}
.ProgressLoaded{
background:url(images/progressLoadedBk.png) repeat-x;
}
.ProgressHandle{
background-image:url(images/sliderHandleSprite.png);
background-position:0px 0px;
width:15px;
margin-left:0px;
cursor:pointer;
}
.ProgressHandle.over{
background-position:-15px 0px;
}
.ProgressPosition{
background:url(images/progressPositionBk.png) repeat-x;
width:0px;
}
.VolumeSlider{
position:absolute;
}
.VolumeSliderBack{
width:128px;
height:30px;
background-image:url(images/player_sprite.png);
background-repeat:no-repeat;
background-position:-1px -95px;
}
.VolumeSliderHandle{
position:absolute;
width:12px;
height:14px;
background-image:url(images/player_sprite.png);
background-repeat:no-repeat;
background-position:-1px -140px;
cursor:pointer;
}
.VolumeSliderHandle.over{
background-position:-15px -138px;
cursor:pointer;
}
.Volume .icon{
background-position:-60px -43px;
width:18px;
height:16px;
position:relative;
top:7px;
left:7px;
}
.Volume.mute .icon{
background-position:-1px -43px;
}
.Volume.low .icon{
background-position:-20px -43px;
}
.Volume.med .icon{
background-position:-40px -43px;
}
.Volume.high .icon{
background-position:-60px -43px;
}
